<?php

/**
 * simcool
 */
if (!defined('__TYPECHO_ROOT_DIR__')) exit;
?>
<!DOCTYPE HTML>
<html lang="zh-cn">

<head><?php $this->need('header.php'); ?></head>

<body>
    <div class="container">
        <div class="columns">
            <!-- cover pc-only -->
            <div class="column col-4 px-0 hide-sm">
                <?php $this->need('cover-today.php'); ?>
            </div>
            <!-- page -->
            <div class="column col-8 col-sm-12 px-0">
                <!-- menu -->
                <div class="container p-0">
                    <?php $this->need('menu.php'); ?>
                </div>
                <!-- cont -->
                <div class="container">
                    <div class="columns">
                        <!-- left -->
                        <div class="column col-3 col-sm-3 px-0">
                            <!-- cate-menu -->
                            <?php $this->need('cateMenu.php'); ?>
                        </div>
                        <!-- right -->
                        <div class="column col-9 col-sm-9 p-0">
                            <!-- page body -->
                            <div class="scroller-y" style="height: calc(100vh - 42px);">
                                <div class="block-space">
                                    <div class="-content-title">
                                        <div class="archive_title text-ellipsis"><?php $this->title(); ?></div>
                                        <div class="archive_date text-right"><?php $this->date(); ?></div>
                                    </div>
                                    <div class="-content" style="margin-top:10px;margin-bottom: 50px;">
                                        <!-- 地图组件 验证如果文章里有位置信息才显示 -->
                                        <?php if ($this->fields->mapLat && $this->fields->mapLng): ?>
                                            <div class="text-large text-small py-2 text-gray chip my-2">坐标和所在位置</div>
                                            <div id="map-container" class="archive-map-container"
                                                data-lat="<?php echo $this->fields->mapLat; ?>"
                                                data-lng="<?php echo $this->fields->mapLng; ?>"></div>
                                        <?php endif; ?>
                                        <!-- 验证登录部分 -->
                                        <?php if (!$this->user->hasLogin() && $this->category == 'member'): ?>
                                            <?php $this->need('-no-login.php'); ?>
                                        <?php else: ?>
                                            <div class="text-large text-small py-2 text-gray chip my-2">文章正文</div>
                                            <?php $this->content(); ?>
                                        <?php endif; ?>
                                    </div>
                                </div>

                                <div class=" block-space">
                                    <ul class="post-near">
                                        <li>上一篇: <?php $this->thePrev('%s', '没有了'); ?></li>
                                        <li>下一篇: <?php $this->theNext('%s', '没有了'); ?></li>
                                    </ul>
                                </div>
                                <?php if ($this->options->post_comment == '1'): ?>
                                    <div class="block-space">
                                        <?php $this->need('comments.php'); ?>
                                    </div>
                                <?php else: ?>
                                    <div class="block-space">
                                        <div class="-icon -power-off col-mx-auto"></div>
                                        <div class="text-center mt-2 text-gray">未开启评论功能</div>
                                    </div>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <?php $this->need('footer.php'); ?>
    </div>

    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=2MmZWqcsEELZVa2hNp3kE2MLlINhhaBh"></script>
    <script>
        let lat = "<?php echo $this->fields->mapLat; ?>"
        let lng = "<?php echo $this->fields->mapLng; ?>"
        if (lat && lng) {
            var map = new BMapGL.Map('map-container');
            var point = new BMapGL.Point(lng, lat);
            map.centerAndZoom(point, 13);
            // 创建小车图标
            var myIcon = new BMapGL.Icon("<?php $this->options->themeUrl('/images/post-map-marker.png'); ?>", new BMapGL.Size(32, 32));
            // 创建Marker标注，使用小车图标
            var pt = new BMapGL.Point(lng, lat);
            var marker = new BMapGL.Marker(pt, {
                icon: myIcon
            });
            // 将标注添加到地图
            map.addOverlay(marker);

            map.updateFocusOptions({
                open: true,
                gray: true, // 是否使用灰度图模式
                involve: 0, // 0 底图面线+图层 1 底图poi 2 覆盖物
                focus: -1, // -1 全部地图使用other着色，此配置不需要商业授权；0 局部，此配置不需要商业授权
                other: [30, 30, 40]
            });

            map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
            var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
            map.addControl(scaleCtrl);
            var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
            map.addControl(zoomCtrl);
        }
    </script>
</body>

</html>